// 引入相关插件或模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const { Template } = require('webpack');
module.exports = {
  // 自定义端口号
  devServer: {
    port: 616,
  },
  // 设置成开发模式
  mode: 'development',
  // 配置webpack的入口和出口
  entry: './src/main.js',
  output: {
    
    clean:true,//每次打包之前清空dist目录下的代码
    path: path.join(__dirname, 'dist'),
    // 自定义文件名
    filename: 'bundle.js',
  },
  // 指定html模板
  plugins: [new HtmlWebpackPlugin(
    {template:'./public/index.html'}
  )],
  module: {
    rules: [
      {
        test: /\.css$/i,//判定是css文件
        //css-loader 让webpack能解析css，style-loader将css文件自动插入DOM中
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,//判定是less文件
        use: [
          //less-loader将less文件解析成css文件
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/i,//判定是图片类型文件
        //图片小于8kb自动转化成base64，大于8kb原图输出
        type: 'asset'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i,//判定是文字类型文件
        type: 'asset/resource',//原类型输出
        //自动生成font文件夹和若干个字体文件，[name]表示生成的文件名与原文件名一致，[hash:6]表示生成6位数的hash字符串，[ext]
        // 表示文件扩展名与原文件一致
        
        generator:{filename:'font/[name].[hash:6][ext]'}
      },
      {//判定是js文件
        test: /\.m?js$/,
        //不包含node_modules和bower_components
        exclude: /(node_modules|bower_components)/,
        //将高级语法转化成低级语法，实现兼容
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ],
  }
};